<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title">默认样式</view>
      <view>
        <switch checked @change="switch1Change" />
        <switch @change="switch2Change" />
      </view>
      <view class="uni-title">不同颜色和尺寸的switch</view>
      <view>
        <switch checked color="#FFCC33" style="transform: scale(0.7)" />
        <switch color="#FFCC33" style="transform: scale(0.7)" />
      </view>
      <view class="uni-title">推荐展示样式</view>
    </view>
    <view class="uni-list">
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">开启中</view>
        <switch checked />
      </view>
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">关闭</view>
        <switch />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {
      switch1Change: function (e) {
        console.log("switch1 发生 change 事件，携带值为", e.detail.value);
      },
      switch2Change: function (e) {
        console.log("switch2 发生 change 事件，携带值为", e.detail.value);
      },
    },
  };
</script>

<style></style>
